<template>
  <div class="wordCloud-view chart-container">
    <div
      class="chart-item"
      v-for="(chart, index) in chartComponents"
      :key="chart.name"
      @click="openChartPreview(chart.component)"
    >
      <component :is="chart.component" />
      <h3>{{ index + 1 }}. {{ chart.label || '词云图' }}</h3>
    </div>
  </div>
  <ChartPreview ref="chartPreviewRef" />
</template>

<script setup>
import { ref } from "vue";
import ChartPreview from "@/components/chartPreview.vue";
import WordCloud01 from "./components/wordCloud01.vue";

const chartComponents = [
  { name: "WordCloud01", component: WordCloud01, label: "词云图" },
];

const chartPreviewRef = ref(null);
const openChartPreview = (component) => {
  chartPreviewRef.value.open(component);
};
</script>

<style scoped></style>
